onload trigger

发表于 2016-02-19 | 分类于 javascript

1 onload 支持该事件的标签和JavaScript对象: HTML标签\,\, \,\, \<img>, \<link>, \<script>，javascript window image layer</p> <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div></pre></td><td class="code"><pre><div class="line">js: window.onload = function(){ }; //onload 事件会在页面或图像加载完成后立即发生</div><div class="line">jquery:$(function(){ }); //当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。</div><div class="line">这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。</div><div class="line">简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。</div><div class="line">有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。</div><div class="line">1 js中只能写一个，如果一个页面写了多个，后面的会将前面的覆盖</div><div class="line"> jquery中可以写多个，后面的不会覆盖</div><div class="line">2 执行时间不同，js中是在页面元素加载完成之后执行</div></pre></td></tr></table></figure> <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div></pre></td><td class="code"><pre><div class="line">js : script.onload = function(){ } ;表示页面中script标签加载完毕</div></pre></td></tr></table></figure> <p>当向jQuery中传入参数的时候，该参数可以作为全局的对 –jQuery– 的引用</p> <figure class="highlight html"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div><div class="line">14</div><div class="line">15</div><div class="line">16</div><div class="line">17</div><div class="line">18</div><div class="line">19</div><div class="line">20</div><div class="line">21</div><div class="line">22</div><div class="line">23</div><div class="line">24</div><div class="line">25</div><div class="line">26</div><div class="line">27</div><div class="line">28</div><div class="line">29</div><div class="line">30</div></pre></td><td class="code"><pre><div class="line"><span class="meta"><!DOCTYPE html></span></div><div class="line"><span class="tag"><<span class="name">html</span>></span></div><div class="line"><span class="tag"><<span class="name">head</span> <span class="attr">lang</span>=<span class="string">"en"</span>></span></div><div class="line"> <span class="tag"><<span class="name">meta</span> <span class="attr">charset</span>=<span class="string">"UTF-8"</span>></span></div><div class="line"> <span class="tag"><<span class="name">title</span>></span><span class="tag"></<span class="name">title</span>></span></div><div class="line"> <span class="tag"><<span class="name">style</span>></span><span class="css"></div><div class="line"> <span class="selector-tag">div</span>{</div><div class="line"> <span class="attribute">width</span>: <span class="number">100px</span>;</div><div class="line"> <span class="attribute">height</span>: <span class="number">100px</span>;</div><div class="line"> <span class="attribute">background-color</span>: <span class="number">#003C78</span>;</div><div class="line"> }</div><div class="line"> </span><span class="tag"></<span class="name">style</span>></span></div><div class="line"><span class="tag"></<span class="name">head</span>></span></div><div class="line"><span class="tag"><<span class="name">body</span>></span></div><div class="line"><span class="tag"><<span class="name">div</span>></span><span class="tag"></<span class="name">div</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span> <span class="attr">src</span>=<span class="string">"jquery-1.12.2.js"</span>></span><span class="undefined"></span><span class="tag"></<span class="name">script</span>></span></div><div class="line"><span class="tag"><<span class="name">script</span>></span><span class="javascript"></div><div class="line"> $(<span class="function"><span class="keyword">function</span>(<span class="params">ev</span>)</span>{</div><div class="line"> <span class="built_in">console</span>.log(<span class="built_in">arguments</span>);</div><div class="line"> <span class="built_in">console</span>.log(ev);</div><div class="line"><span class="comment">// $("div").click(function(){</span></div><div class="line"><span class="comment">// $(this).css("background-color","red")</span></div><div class="line"> <span class="comment">//等价于下面</span></div><div class="line"> ev(<span class="string">"div"</span>).click(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> ev(<span class="keyword">this</span>).css(<span class="string">"background-color"</span>,<span class="string">"red"</span>)</div><div class="line"> })</div><div class="line"> })</div><div class="line"></span><span class="tag"></<span class="name">script</span>></span></div><div class="line"><span class="tag"></<span class="name">body</span>></span></div><div class="line"><span class="tag"></<span class="name">html</span>></span></div></pre></td></tr></table></figure> <p>2 trigger(type,[data]) 在每一个匹配的元素上触发某个事件(该事件必须已经绑定在了所匹配的元素上)，以下代码是等价的</p> <figure class="highlight javascript"><table><tr><td class="gutter"><pre><div class="line">1</div><div class="line">2</div><div class="line">3</div><div class="line">4</div><div class="line">5</div><div class="line">6</div><div class="line">7</div><div class="line">8</div><div class="line">9</div><div class="line">10</div><div class="line">11</div><div class="line">12</div><div class="line">13</div></pre></td><td class="code"><pre><div class="line">functin render(){</div><div class="line"> <span class="built_in">console</span>.log(<span class="string">"我被执行了"</span>);</div><div class="line">}</div><div class="line">$(<span class="built_in">window</span>).on(<span class="string">'resize'</span>,<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> render();</div><div class="line"> }).trigger(<span class="string">'resize'</span>);</div><div class="line"> <span class="comment">/* 等价于*/</span></div><div class="line">$(<span class="built_in">window</span>).resize(<span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> render();</div><div class="line">});</div><div class="line"><span class="built_in">window</span>.onresize = <span class="function"><span class="keyword">function</span>(<span class="params"></span>)</span>{</div><div class="line"> render();</div><div class="line">};</div></pre></td></tr></table></figure> </script>